<template>
    <div class="search">
        <!-- 搜索 -->
        <div class="search-header">
            <div class="form">
                <i></i>
                <input @input="addInput" v-model="inpV" @keydown.enter="addKeyDown" type="text" placeholder="请输入歌词名称">
                <!-- <button>搜索</button> -->
                <span @click="addRemoveFunc" v-if="isShow">×</span>
            </div>
        </div>
        <!-- 热门搜索词汇 -->
        <div class="search-hot" v-if="!isShow">
            <div class="box">
                <ul>
                    <li v-for="item in hots" @click="getSearch(item.first)">
                        {{ item.first }}
                    </li>
                </ul>
            </div>
            <song-list></song-list>
        </div>
        <!-- 搜索结果 -->
        <div class="search-list" v-if="isShow">
            <div v-if="songList.length != 0" class="box">
                <ul>
                    <li v-for="(item ,i ) in songList">
                        <router-link :to="`/lyric?id=${item.id}&keywords=${item.name}`">
                            <h4>{{ i + 1 }}.{{ item.name }}</h4>
                            <p>{{ item.str }}</p>
                        </router-link>
                    </li>
                </ul>
            </div>

            <div v-else>
                <div class="tip">没有该歌曲信息。</div>
            </div>
        </div>
       
    </div>
</template>


<script>
// 按需导入
import { addSearchHot, addSearch } from '@/request';
// 导入推荐音乐组件
import SongList from '@/components/song-list.vue';

let d = null;
// 全部导出（暴露组件）
export default {
    name: 'searchmusic',
    components:{ SongList },
    data() {
        return {
            // 记录输入框的值
            inpV: '',
            // 记录热搜歌曲
            hots: [],
            // 歌曲列表
            songList: [],
            // 判断输入框是否有值
            isShow: false 
        }
    },
    mounted() {
        // 初始化
        this.getSearchHot();
    },
    methods: {
        // 获取热门搜索词汇
        async getSearchHot() {
            await addSearchHot().then(content => {
                // console.log(content)
                // let {code,result} = content;
                if (content.code == 200) {
                    console.log(content.result)
                    this.hots = content.result.hots;
                }
            })
            // 。。。。。。等待
        },
        // 搜索歌曲
        async getSearch(keywords) {
            this.inpV = keywords;
            await addSearch({ keywords }).then(
                content => {
                    // console.log(content)
                    if (content.code == 200) {
                        // 显示搜索结果
                        this.isShow = true;
                        console.log(content)
                        if(content.result.songs){
                            let arr = [];
                            arr = content.result.songs.map(item => {
                                let str = '';
                                let { artists} = item;
                                // console.log(artists)
                                for (let i = 0; i < artists.length; i++) {
                                    str += artists[i].name + " /"
                                }
                                item.str = str.substring(0,str.length - 1);
                                return item;
                            })
                            // 赋值
                            this.songList = arr;
                        }else {
                            this.songList = [];
                        }
                    }
                }
            )
        },
        // 按键盘回车按键
        addKeyDown() {
            // 输入框的值
            this.getSearch(this.inpV);
        },
        // 监听输入框的值
        addInput(){
            if(this.inpV.length == 0){
                // 隐藏搜索结果
                this.isShow = false;
                this.songList = []
            }else {
                this.isShow = true;
                // 输入框有值 判断d变量是否为null
                if(d != null) {
                    return false;
                }
                d = setTimeout(()=>{
                    // 搜索歌曲
                    this.getSearch(this.inpV);
                    clearTimeout(d);
                },500)
            }
        },
        // 点击删除按钮
        addRemoveFunc(){
            // 重置页面的数据
            this.inpV = "";
            this.isShow = false;
            this.songList = [];
        }
    }
}
</script>

<style lang="scss">
@import '../../../static/style/variable.scss';

.search {
    width: 100%;
}

.search-header {
    width: 100%;
    height: 1.6rem;
    background-color: #fff;
    padding: $pad;
    display: flex;
    align-items: center;

    .form {
        width: 100%;
        position: relative;
        span {
            position: absolute;
            top: .2667rem;
            right: .2667rem;
            z-index: 10000;
            width: .5333rem;
            height: .5333rem;
            background-color: #ccc;
            color: #fff;
            text-align: center;
            line-height: .5333rem;
            border-radius: 50%;
        }

        i {
            position: absolute;
            top: .2667rem;
            left: .1333rem;
            width: 20px;
            height: 20px;
            // background-color: red;
            background-size: cover;
            background-position: 0 0;
            background-repeat: no-repeat;
            background-image: url(../../../static/images/i-search.png);
        }

        input {
            width: 100%;
            height: 1.0667rem;
            border: 1px solid $borderColor;
            padding-left: .8rem;
            border-radius: .5333rem;
        }
    }
}

.search-hot {
    width: 100%;

    .box {
        padding: $pad;

        ul {
            width: 100%;
            display: flex;
            flex-wrap: wrap;

            li {
                border: 1px solid #ccc;
                padding: .1333rem .2667rem;
                margin: .1333rem;
                font-size: 14px;
                border-radius: .08rem;
                color: #666;
            }
        }
    }
}

.search-list {
    width: 100%;
    .box {
        padding: $pad;
        ul {
            li {
                width: 100%;
                border: 1px solid #f0f0f0;
                box-shadow: 0 2px 2px #ccc;
                margin-top: .2667rem;
                padding-left: .2667rem;
                min-height: 1.6rem;
                box-sizing: border-box;

                h4 {
                    padding: .1333rem 0;
                    font-weight: normal;
                }
                p {
                    line-height: 1.75;
                    color: #666;
                    font-size: 14px;
                }
            }
        }
    }
}

.tip {
    padding: .8rem 0 ;
    text-align: center;
}
</style>